import React from 'react';
import { render } from 'react-dom';

import { Table, Divider, Tag, Icon, Button, Modal, Popconfirm } from 'antd';

import { MainMyItemsDetailComponent } from './main.myItemsDetail';
import { ThumbnailViewComponent } from '../component/thumbnailView';
import { WebTool } from '../lib/webtool';


export class MainMyItemsComponent extends React.Component {
    constructor() {
        super();

    }
    
    confirmDel = (id)=>{
        WebTool.post('/main/delItem',{id:id},json=>{
            this.fetch();
        }); 
    }

    columns = [
    {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        render: text => <a>{text}</a>,
    },
    {
        title: 'Description',
        dataIndex: 'description',
        key: 'description',
    },
    {
        title: 'Photo',
        dataIndex: 'thumbnail',
        key: 'thumbnail',
        render: (text, record) => (
            <ThumbnailViewComponent 
              previewImage={record.photo}
              thumbnail={record.thumbnail}
              heigth={100}
             ></ThumbnailViewComponent>
        ),
    },
    {
        title: 'Suggest',
        dataIndex: 'description',
        key: 'description1',
        render: (text, record) =>(
            <a target="blank" href={"/suggest?itemId="+record.id}>suggested swaps</a>
        )
    },
    {
        title: 'Action',
        key: 'action',
        render: (text, record) => (
            <span>
                {/* <a>Invite {record.name}</a>
                <Divider type="vertical" /> */}
                <Popconfirm
                    title="Are you sure delete this item?"
                    onConfirm={()=>this.confirmDel(record.id)}
                    //onConfirm={()=>this.confirmDel('112')}
                    okText="Yes"
                    cancelText="No"
                    >
                    <a href="#" item-id={record.id}>Delete</a>
                </Popconfirm>
            </span>
        ),
    },
];

    state = {
        modalVisible: false,
        modalTitle: 'Add item',
        data: [],
        pagination: {},
        loading: false,
    };

    openModal = () => {
        this.setState({
            modalVisible: true,
        });
    }

    close = (isReload) => {
        this.setState({
            modalVisible: false,
        });

        if (isReload) {
            this.fetch();
        }
    };

    componentDidMount() {
      this.fetch();
    }


    handleTableChange = (pagination, filters, sorter) => {
        const pager = { ...this.state.pagination };
        pager.current = pagination.current;
        this.setState({
            pagination: pager,
        });
        this.fetch({
            results: pagination.pageSize,
            page: pagination.current,
            sortField: sorter.field,
            sortOrder: sorter.order,
            ...filters,
        });
    };

    fetch = (params = {}) => {
        var pageIndex = params.page || 1;
        var pageSize = params.results || 10;
        this.setState({ loading: true });
        WebTool.get(`/main/getMyItems?pageIndex=${pageIndex}&pageSize=${pageSize}`, data=>{
            const pagination = { ...this.state.pagination };
            // Read total count from server
            // pagination.total = data.totalCount;
            pagination.total = data.total;
            this.setState({
                loading: false,
                data: data.list,
                pagination,
            });
        });
    };

    render() {
        return (
            <div>
                <div className="table-operations">
                    <Button type="primary" onClick={this.openModal}>Add item</Button>
                </div>
                <Table columns={this.columns}
                       rowKey={record => record.id}
                       dataSource={this.state.data}
                       pagination={this.state.pagination}
                       loading={this.state.loading}
                       onChange={this.handleTableChange}
                ></Table>

                <MainMyItemsDetailComponent onClose={this.close} title={this.state.modalTitle || 'detail'} visible={this.state.modalVisible}></MainMyItemsDetailComponent>
            </div>
        );
    };
}
